<template>
    <view class="content">
        <view class="content_list">
            <view class="content_list_label" @click="addressShow = true">点击选择地址</view>
            <view class="content_list_content">
                {{address}}
                <pickerAddress v-model="addressShow" @confirm="addresspick" />
            </view>
        </view>
		
		<button @click='myfunc'>查看已选</button>	
    </view>
</template>

<script>
    import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
    export default {
        data() {
            return {
                addressShow: false,
                form: {
                    province: '',
                    city: '',
                    area: '',
                },
                address: ''
            }
        },
        onLoad() {

        },
        methods: {
			myfunc(){
				// console.log('=== province:', this.form['province']);
				console.log('=== address:', this.address);
			},
            addresspick(obj) {
                let arr = [ 'province', 'city', 'area'];
                let place = '';
				
                arr.map(key => {
                    this.form[key] = obj[key].AreaId
                    place += obj[key].AreaName + "/"
                })
                this.address = place
            },
        },
        components: {
            pickerAddress
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        &_list{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content:space-around;
            &_lable{

            }
            &_content{
                flex: 1;
                width: auto;
                text-align: right;
            }
        }
    }
</style>